<template>
	<div>
		<!-- 在这里先标记元素,下面就可以直接使用this.$refs.ref名称 来操作对应的元素 -->
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的h1 DOM元素</button>
		<!-- 用在组件上面可以获取组件实例 -->
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	//ref就是用来标记操作DOM元素的，用在组件上面的时候可以获取组件 实例对象，组件通信会用
	import School from './components/School'

	export default {
		name:'App', //定义当前组件在开发者工具的组件标签名
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				//以前操作其他元素可能得用Jquery或者原生的api
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //注意:使用ref可以获取School组件的实例对象（vc）,如果使用原生的api getElementById获取到的就是完整的Dom元素
			}
		},
	}
</script>
